<template>
  <div class="tab">
    <van-tabs
      color="#FF8198"
      title-active-color="#FF8198"
      v-model:active="activeName"
      @click="checkout"
    >
      <van-tab
        v-for="(item, index) in tablist"
        :key="index"
        :title="item"
        name="a"
      >
        <div class="w-100 d-flex flex-warp justify-space-around con">
          <!-- 图片每一项 -->
          <div
            class="item d-flex flex-direction-column"
            v-for="item in goods"
            :key="item.iid"
            @click="todetail(item.iid)"
          >
            <!-- 图片 -->
            <van-image :src="item.show.img">
              <template v-slot:loading>
                <van-loading type="spinner" size="20" />
              </template>
            </van-image>

            <div>
              <!-- 商品标题 -->
              <p class="omitted title">{{ item.props[0] }}</p>
              <p class="price text-center">
                <span>{{ item.price }}</span>
                <van-icon class="icon" name="star-o" />
                {{ item.orgPrice }}
              </p>
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import {
  reactive,
  ref,
  toRef,
  toRefs,
  onMounted,
  getCurrentInstance,
} from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
export default {
  props: ["tablist", "goods"],
  setup(props) {
    const store = useStore();
    const ctx = getCurrentInstance();
    const router = useRouter();
    const activeName = ref("a");

    const checkout = (number, name) => {
      ctx.emit("checkout", name);
    };
    const todetail = (id) => {
      router.push("/detail/" + id);
      store.commit("setstatus", false);
    };

    return {
      activeName,
      checkout,
      todetail,
    };
  },
};
</script> 

<style scoped lang="scss">
.tab {
  margin-bottom: 44px;
}
.item {
  width: 48%;
  display: flex;
  justify-content: space-between;
}
.title {
  font-size: 12px;
  color: #666666;
}
/* 价格 */
.price {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  span {
    color: #ff8198;
  }
  .icon {
    margin-left: 5px;
  }
}
</style>